<%--
  Created by IntelliJ IDEA.
  User: MY PC
  Date: 2018/11/27
  Time: 11:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="common.jsp" %>
<html>
<head>
    <title>Title</title>
    <script>
        window.onload = function () {
            layui.use('laydate', function () {
                var laydate = layui.laydate;

                //执行一个laydate实例
                var ins1 = laydate.render({
                    elem: '#test1',     //指定元素,
                    type: "datetime"    //可选择：年、月、日、时、分、秒
                    // range: true      //开闭的时间范围
                    // range: "~",         //开闭的时间范围分隔符
                    // format:"yy年MM月dd日 HH:mm:ss"
                    // value:"2018-11-22"
                    // value: new Date(1534766888000), //设置初始值
                    // isInitValue: false  //默认为true,设置为false时,value的值为无效的
                    // ,min: -7 //7天前
                    // ,max: 7 //7天后
                    // , trigger: 'click' //采用click弹出
                    // , show: true //直接显示
                    // , position: 'fixed'
                    // ,showBottom: false  //是否显示底部按钮
                    // ,btns: ['clear', 'confirm'] //自定义底部按钮
                    // ,lang: 'en' //定义语言风格
                    , theme: 'molv'  //设置时间弹窗的主题
                    // ,calendar: true //公历
                    , mark: {   //标注重要的日子
                        '0-11-14': '生日'
                        , '0-11-29': '跨年' //每年12月31日
                        , '0-0-10': '工资' //每个月10号
                        , '2018-11-16': '入职' //具体日期
                        , '2018-11-20': '预发' //如果为空字符，则默认显示数字+徽章
                        , '2018-11-22': '发布'
                    }, done: function (value, date) {   //控件选择完毕后的回调, 即:日期选定后的回调
                        if (date.year === 2018 && date.month === 11 && date.date === 19) { //点击2017年8月15日，弹出提示语
                            console.log('中国人民抗日战争胜利72周年');
                            console.log(value);
                            console.log(date);
                        }
                    }, ready: function (date) { //控件初始打开的回调
                        console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                    }, change: function (value, date, endDate) {//更新时间值的调用
                        console.log(value); //得到日期生成的值，如：2017-08-18
                        console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                        console.log(endDate); //得到结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                        ins1.hint(value); //在控件上弹出value值
                    }

                });

                //获取指定指定年的月份的最后一天
                var lastDate = laydate.getEndDate(2, 2018);
                console.log(lastDate)

                // laydate.render({
                //     elem: '#test2'
                //     , position: 'static'
                //     , change: function (value, date) { //监听日期被切换
                //         lay('#testView').html(value);
                //     }
                // });
            });
        }
    </script>
</head>
<body>
<div style="text-align: center">
    <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
        选择时间:
        <input type="text" class="layui-input" id="test1">

        <span id="testView"></span>
        <div id="test2"></div>
    </div>
</div>
</body>
</html>
